<template>
	<view>

		<!-- 备注统计 -->
		<view class="noteDay_box">
			<view class="noteDay_con">
				
				<view :class="'dayItem '+(dayActive==-1?'active':'')" @click="selectAll">
					<!-- <view class="dayIcon">
						<u-icon name="search" color="#8B8A90" size="28"></u-icon>
					</view> -->
					<view class="dayMore">全部</view>
				</view>
				<view :class="'dayItem '+(dayActive == index ? 'active':'')" v-for="(item,index) in dayList"
					:key="index" @click="selectDay(index,item.add_date)">
					<view class="dayTime">{{item.date}}</view>
					<view class="dayNum">{{item.num}}<text>(条)</text></view>
					<view class="dayWeek">周{{item.week}}</view>
				</view>
				
			</view>
		</view>

		<!-- 记录列表 -->
		<view class="remarkList_box">
			<view class="remarkListItem" v-for="(item,index) in remarkList" :key="index"
				v-if="index==0 || (index>0 && item.add_date!=remarkList[index-1].add_date)"
				@click="noteClick(item.add_date)">
				<view class="remarkLeft">
					<text class="monthBox">{{item.month_str}}</text>
					<text>{{item.day_str}}</text>
				</view>
				<view class="remarkRight">
					<view class="remarkItem" v-if="defaultWorksite.role>1">
						<text>人员：</text>
						<text class="rightMainBox">{{item.userName}}...</text>
					</view>
					<view class="remarkItem" v-if="defaultWorksite.role==1 && item.workInfo.num>0">
						<text>记工：</text>
						<text class="rightMainBox rightMainBox2">
							{{item.workInfo.num}}{{item.workInfo.work_class_type?'H':'工'}}{{item.workInfo.overtime_hour>0?'('+item.workInfo.overtime_hour+'H)':''}}
						</text>
						<text>记账：</text>
						<text class="rightMainBox rightMainBox2">
							{{item.accountNum}}
						</text>
					</view>
					<view class="remarkItem">
						<text>内容：</text>
						<text class="rightMainBox">{{item.remark}}{{defaultWorksite.role>1?'...':''}}</text>
					</view>
				</view>
			</view>
		</view>
		
		

		<!-- 完成记账 -->
		<view style="width: 100%; height: 160rpx;">
			
		</view>
		<view class="handlePost_con handleFixed">
			<view class="cancelBtn" @click="showDownFile">
				<image src="/static/download.png" mode=""></image>
				<text>PDF下载</text>
			</view>
			<view class="completeBtn" @click="addNote">记备注</view>
		</view>

		<!-- 更多弹窗 -->
		<u-popup v-model="moreShow" mode="center" width="650" border-radius="20" :mask-close-able="false" closeable
			duration="0" safe-area-inset-bottom @close="moreShow = false">
			<view class="exportDate_box">
				<view class="exportDate_tit">选择时间</view>
				<view class="exportList_box">
					<view class="handleList_con">
						<view class="handleLabel handleLabelLong">开始时间：</view>
						<view class="handleList">
							<picker style="width: 100%;" mode="date" :value="startDate" @change="startChange">
								<view class="pickerCon">
									<text>{{startDate}}</text>
									<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
								</view>
							</picker>
						</view>
					</view>
					<view class="handleList_con">
						<view class="handleLabel handleLabelLong">结束时间：</view>
						<view class="handleList">
							<picker style="width: 100%;" mode="date" :value="endDate" @change="endChange">
								<view class="pickerCon">
									<text>{{endDate}}</text>
									<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="handlePost_con">
					<view class="completeBtn" @click="moreConfirm">确 认</view>
				</view>
			</view>
		</u-popup>

		<!-- PDF下载弹窗 -->
		<u-popup v-model="downloadShow" mode="bottom" border-radius="20" :mask-close-able="false" closeable
			close-icon-size="40" duration="0" @close="downloadShow = false">
			<view class="exportDate_box">
				<view class="exportDate_tit">PDF下载</view>
				<view class="exportList_box">
					<view class="handleList_con">
						<view class="handleLabel handleLabelLong">开始时间：</view>
						<view class="handleList">
							<picker style="width: 100%;" mode="date" :value="startDate" @change="startChange">
								<view class="pickerCon">
									<text>{{startDate}}</text>
									<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
								</view>
							</picker>
						</view>
					</view>
					<view class="handleList_con">
						<view class="handleLabel handleLabelLong">结束时间：</view>
						<view class="handleList">
							<picker style="width: 100%;" mode="date" :value="endDate" @change="endChange">
								<view class="pickerCon">
									<text>{{endDate}}</text>
									<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
								</view>
							</picker>
						</view>
					</view>
					<view class="handleList_con">
						<view class="handleLabel handleLabelLong">人员：</view>
						<view class="handleList">
							<view class="pickerCon"
								style="height: auto; line-height: auto; padding: 20rpx; align-content: center;"
								@click="workerClick">
								<text v-if="workerNames">{{workerNames}}</text>
								<text class="placeholderColor" v-else>请选择相关人员</text>
								<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="handlePost_con">
					<view class="completeBtn" @click="downloadClick">生成PDF</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				projectId: '',
				role: 1,
				projectName: '',

				// 备注统计列表
				dayList: [],
				dayActive: -1,

				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 消息通知列表
				remarkList: [],

				// 更多弹窗
				moreShow: false,
				startDate: '',
				endDate: '',

				// pdf下载弹窗
				downloadShow: false,
				workerNames: '',
				workerIds: '',
			}
		},
		onLoad(e) {
			var _this = this;
			if (e.project_id) {
				_this.projectId = e.project_id;
				_this.role = e.role;
				_this.projectName = e.project_name;
			} else {
				_this.projectId = _this.defaultWorksite.project_id
				_this.role = _this.defaultWorksite.role
				_this.projectName = _this.defaultWorksite.project_name
			}
		},
		onShow: function() {
			var _this = this;
			_this.pages = 1;
			_this.getDayList();
			_this.getRemarkList();

			uni.$on('updateWorker', function(data) {
				console.log(data);
				var workerArray = data;
				var workerNamesArray = [];
				var workerIdsArray = [];
				for (var i = 0; i < workerArray.length; i++) {
					workerNamesArray.push(workerArray[i].userInfo.name);
					workerIdsArray.push(workerArray[i].id);
				}
				_this.workerNames = workerNamesArray.join(',');
				_this.workerIds = workerIdsArray.join(',');
			})
		},
		onReady() {},

		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		onShareAppMessage(res) {
			return {
				title: this.projectName + '施工日志，请查收',
				path: '/pages/remark/remarkList?project_id=' + this.projectId + '&role=' + this.role + '&project_name=' +
					this.projectName,
				imageUrl: '/static/sharePic.jpg',
			}
		},
		methods: {
			
			//打开下载的弹出框
			showDownFile(){
				var _this = this;
				_this.startDate = _this.$util.nowDate();
				_this.endDate = _this.$util.nowDate();
				_this.downloadShow=true;
			},
			//点击产看更多
			moreShowClick() {
				var _this = this;

				_this.startDate = _this.$util.nowDate();
				_this.endDate = _this.$util.nowDate();
				_this.moreShow = true;

			},
			// 获取备注统计列表
			getDayList() {
				var _this = this;
				_this.$u.get('/api/project.remark/getDayList', {
					id: _this.defaultWorksite.project_id,
				}).then(res => {
					_this.dayList = res.data
				}).catch(res => {
					console.log(res);
				})
			},

			// 选择时间
			selectDay(index, addDate) {
				var _this = this;
				_this.dayActive = index;
				// 开始日期
				_this.startDate = addDate;
				// 结束日期
				_this.endDate = addDate;
				_this.pages = 1;
				_this.getRemarkList();
			},

			// 获取备注列表
			getRemarkList() {
				var _this = this;
				_this.$u.get('/api/project.remark/getList', {
					pages: _this.pages,
					limit: _this.limit,
					start: _this.startDate,
					end: _this.endDate,
					project_id: _this.projectId,
					role: _this.role
				}).then(res => {
					uni.hideLoading();
					console.log("==获取备注列表==");
					console.log(res);
					var remarkList = _this.remarkList;
					if (_this.pages == 1) {
						remarkList = [];
					}
					_this.remarkList = remarkList.concat(res.data);

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;

				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					uni.showLoading({
						title: '加载中'
					});
					_this.getRemarkList();
				}, 2000)
			},

			// 记备注
			addNote() {
				uni.navigateTo({
					url: './noteForm'
				})
			},

			// 选择开始时间
			startChange(e) {
				// console.log(e)
				this.startDate = e.detail.value;
			},

			// 选择结束时间
			endChange(e) {
				// console.log(e)
				this.endDate = e.detail.value;
			},

			// 更多确认
			moreConfirm() {
				var _this = this;
				_this.moreShow = false;
				_this.pages = 1;
				_this.getRemarkList();
			},
			
			
			selectAll(){
				var _this = this;
				_this.dayActive =-1;
				_this.pages = 1;
				_this.startDate ='';
				_this.endDate = '';
				_this.getRemarkList();
			},

			// 选择工人
			workerClick() {
				uni.navigateTo({
					url: '/pages/worker/selectWorker'
				})
			},

			// 确认导出
			downloadClick() {
				var _this = this;
				_this.dateShow = false;
				console.log("导出")

				if (!_this.workerIds) {
					uni.showToast({
						title: '请选择工人',
						icon: 'none'
					})
					return
				}
				_this.downloadShow = false;
				uni.navigateTo({
					url: './noteLog?start=' + _this.startDate + '&end=' + _this.endDate + '&member_id=' + _this
						.workerIds + '&project_id=' + this.projectId
				})
			},

			// 备注详情
			noteClick(date) {
				console.log(date);
				uni.navigateTo({
					url: './noteDetail?date=' + date
				})
			},

		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	// 备注统计
	.noteDay_box {
		padding: 30rpx;
		background-color: #fff;
	}

	.noteDay_con {
		display: flex;
		flex-wrap: wrap;
	}

	.dayItem {
		width: 156rpx;
		height: 160rpx;
		text-align: center;
		color: #8B8A90;
		background: #f0f0f0;
		border-radius: 20rpx;
		overflow: hidden;
		margin-right: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
	}

	.dayItem:last-child {
		margin-right: 0;
	}

	.dayItem.active {
		color: $uni-color-white;
		background: $uni-color-active;
	}

	.dayTime {
		width: 100%;
		font-size: 24rpx;
		text-align: center;
	}

	.dayNum {
		width: 100%;
		font-size: 32rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.dayNum text {
		font-size: 28rpx;
	}

	.dayWeek {
		width: 100%;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.dayIcon {
		width: 100%;
	}

	.dayMore {
		width: 100%;
		font-size: 28rpx;
	}

	// 备注列表
	.noteList_box {
		padding: 0 30rpx;
	}

	.noteList_con {
		padding-bottom: 152rpx;
		margin-top: 30rpx;
	}

	.noteItem {
		margin-bottom: 30rpx;
	}

	.noteDate {
		padding: 30rpx 0;
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.noteWrap {
		background-color: $uni-color-white;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.noteHead {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.weather {
		font-size: 24rpx;
		color: $uni-color-text;
	}

	.noteBody {
		padding: 30rpx;
	}

	.noteCon {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.noteContent {
		flex: 2;
		height: 140rpx;
		margin-right: 20rpx;
	}

	.notePic {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.notePic image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		overflow: hidden;
		// margin-right: 20rpx;
	}

	.noteKeep {
		padding: 20rpx 30rpx;
		font-size: 24rpx;
		color: $uni-color-active;
		background: #f0f6ff;
		border-radius: 5rpx;
		overflow: hidden;
	}

	// 下载
	.cancelBtn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cancelBtn image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	// 选择导出时间弹窗
	.exportDate_box {}

	.exportDate_tit {
		padding: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
		text-align: center;
	}

	.exportList_box {
		padding: 0 30rpx;
	}

	/* 记录列表 */
	.remarkList_box {
		padding: 0 30rpx;
		background-color: #fff;
	}

	.remarkListItem {
		// min-height: 140rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: $uni-bg;
		border-radius: $uni-radius;
		overflow: hidden;
	}

	.remarkLeft {
		width: 100rpx;
		height: 100rpx;
		border-radius: $uni-radius;
		background-color: $uni-color-active;
		float: left;
		padding: 10rpx 0;
		margin-right: 20rpx;
	}

	.remarkLeft text {
		display: block;
		color: $uni-color-white;
		text-align: center;
		font-weight: bold;
		line-height: 40rpx;
	}

	.remarkLeft text.monthBox {
		color: $uni-color-white;
	}
	
	.rightMainBox{
		font-size: 28rpx;
	}
	.rightMainBox2{
		margin-right: 20rpx;
	}
	.remarkHeaderBox {
		overflow: hidden;
	}

	.remarkListHeader {
		padding: 20rpx;
		background-color: #ECEDEF;
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		overflow: hidden;
		float: left;
	}

	.remarkListHeader image {
		width: 100%;
		height: 100%;
	}

	.remarkBox {
		padding: 20rpx;
	}

	.nameBox {
		float: left;
		padding-left: 20rpx;
		color: $uni-color-text;
		font-size: 28rpx;
		line-height: 80rpx;
		width: 400rpx;
		height: 80rpx;
		overflow: hidden;
	}

	.nameBox text {
		display: block;
		color: $uni-color-text;
		font-size: 24rpx;
		padding-top: 10rpx;
	}

	.weatherBox {
		float: right;
		line-height: 80rpx;
		width: 150rpx;
		text-align: right;
		color: $uni-color-text;
		font-size: 24rpx;
	}

	.remarkMain {
		width: 100%;
		// padding: 10rpx 0rpx;
		overflow: hidden;
		position: relative;
	}

	.rearkMainBox {
		width: 530rpx;
		padding: 10rpx 0rpx;
		// min-height: 80rpx;
	}

	.reamkImage {
		position: absolute;
		right: 0;
		top: 20rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.reamkImage image {
		width: 100%;
		height: 100%;
	}
	
	.remarkItem {
		font-size: 30rpx;
		line-height: 50rpx;
	}
	.rightMainBox {
		font-size: 30rpx;
	}
</style>
